<template>
	<view class="facial-content">
		<view class="h100p">
			<view id="find-result" data-v-8083dada="">
				<view class="own-top pr">
					<view class="before-fl"></view>
					<view class="contetn-ft w100p h100p">
						<view class="face-images-wrap center">
							<view class="active face-images-item">
								<img :src="imageURL" alt="">
							</view>
						</view>
						<view class="face-result-tips"><text>共找到TA</text><text class="num">{{ flowList.length
						}}</text><text>张精彩瞬间</text>
						</view>
					</view>
				</view>
				<view class="Waterfall_flow ">
					<wContainer :columnNumber="columnNumber" :columnSpacing='columnSpacing'>
						<wItem v-for="(item, index) in flowList" :key="index">
							<view class="box">
								<image class="image"
									:class="{'purchased':item.is_buy,'flex-s': true, 'check_btn': isCartEdit,  'check_btn': !isCartEdit,'xz': selectedImages.includes(item.id) }"
									:src="item.file_path" mode="widthFix" @click="preview(item,index,item.id)"></image>
							
								<!-- <view class="title">323232</view> -->
							</view>

						</wItem>
					</wContainer>

					<!-- <u-list>
						<view class="list_images">
							<u-list-item v-for="(item, index) in flowList" :key="item.id"
								:class="{ 'demo-warter': true, 'checked': selectedImages.includes(item.id) }">
								<img :src="item.file_path" alt="" @click="toggleSelectImage(item.id, index,item)" />
								<view class="check_area g_full" v-if="!isCartEdit">
									<i class="check_btn"></i>
								</view>

							</u-list-item>
						</view>+
					</u-list> -->
				</view>
				<view class="face-fixed-bar" style="" v-if="isCartEdit">
					<view class="flex-v" @click="homepage"><img
							src="https://static1.weizan.cn/zhibo/livecontent/topic/images/face-back.png"
							alt=""><text>返回直播</text></view>
					<view class="flex-v" @click="homepage"><img
							src="https://static1.weizan.cn/zhibo/livecontent/topic/images/face-pic.png"
							alt=""><text>再次找图</text></view>
					<view class="face-share-btn" @click="setCartEdit">下载</view>

				</view>

				<footer class="check_footer" v-else>
					<p class="down-tips" v-if='(+infrom.photo_price)'> 付费明细:
						单张图片{{infrom.photo_price}}元，总共选中{{selectedImages.length}}张，已包含可免费下载{{selectedImage.length}}张
					</p>
					<div class="row g_max">
						<div class="cancel" @click="isCartEdit = true"><u-icon name="close" size="28"></u-icon>取消</div>
						<div class="d-flex btn-wrap-outer" v-if='(+infrom.photo_price)'>
							<div class="free-download"><!---->
								<div class="btn-down" @click="freeDownload">
									<p class="btn-text">免费下载</p>
									<p class="sub-text">有水印</p>
								</div>
							</div>
							<div class="pay-download" @click="paidDownloads">
								<div class="btn-down">
									<p class="btn-text">
										共{{((selectedImages.length - selectedImage.length) * infrom.photo_price).toFixed(2)}}元
									</p>
									<p class="sub-text">高清无水印原图</p>
								</div>
							</div>
						</div>
						<view class="d-flex btn-wrap-outer m-btn-wrap" v-if='!(+infrom.photo_price)'>
							<view class="btn-down" @click="freeDownload">
								<view class="btn-text">免费下载</view>
						
							</view>
						</view>
					</div><!----><!---->
				</footer>
				<view class="no-data" style="display: none;"><img width="172" class="no-img"
						src="https://j1.weizan.cn/live-statics/livepage/live-static/img/noresult.cbef69a7.png" alt=""
						srcset="">
					<view class="no-btn-wrap">
						<view class="back-btn" @click="homepage">
							<img src="https://static1.weizan.cn/zhibo/livecontent/topic/images/face-back.png"
								alt=""><text>返回直播</text>
						</view>
						<view class="re-find-btn" @click="homepage"><img
								src="https://static1.weizan.cn/zhibo/livecontent/topic/images/face-pic.png" alt=""><text
								class="">再次找图</text></view>
					</view>
				</view>
			</view>
		</view>
		<!-- 购物车 -->
		<!-- 购物车弹框 -->
		<u-popup :show="cartInfrom.isCart" mode="bottom" :round="20" @close="cartInfrom.isCart = false">
			<view class="cart_box">
				<view class="header">
					<h1>购物车</h1>
					<p class="action" @click="cartInfrom.isCartEdit = !cartInfrom.isCartEdit"
						v-if="cartInfrom.isCartEdit">管理</p>
				</view>
				<u-collapse :value="['1']">
					<u-collapse-item class="open-flag" :title="'图片'+ cartList.length +'张'" name="1">
						<scroll-view scroll-y="true" style="height: 460rpx;">
							<view class="list_wrappers " v-if="cartList.length">
								<view class="list_img image-container">
									<view :class="{ 'active': cartSelectedImages.includes(item.id) }"
										v-for="(item, index) in cartList" :key="item.url"
										@click="cartToggleSelectImage(item.id)">
										<img :src="item.url" mode=""></img>
									</view>
								</view>
							</view>
							<view class="empty_tip" v-else>空空的购物车</view>
						</scroll-view>
					</u-collapse-item>
				</u-collapse>
				<view class="footer" v-if="cartInfrom.isCartEdit">
					<view class="price">
						<text class="sum"><text>总金额</text><var>￥{{ cartInfrom.total_price }}</var></text>
						<view class="detail"><text><i>图片总价</i>
								￥{{ cartInfrom.total_price }}</text></view>
					</view>
					<button class="pay" @click="paidDownload">立即支付</button>
				</view>
				<view class="footer" v-else>
					<u-checkbox-group @change="handleClick">
						<u-checkbox shape="circle" label="全选" :checked="cartInfrom.checked">全选</u-checkbox>
					</u-checkbox-group>
					<button class="control" @click="backRet">返回</button>
					<button class="control del" @click="deleteCart">删除</button>
				</view>
			</view>
		</u-popup>

		<!-- <Preview v-if="isDetas" :currents='0' @updateValue="updateValue" :list="flowList" @close="isDetas = false"
			:infrom="infrom" :live_id="34" /> -->

		<Preview v-if="isDetas" :currents='0' @updateValue="updateValue" :list="flowList" @close="isDetas = false"
			:infrom="infrom" :live_id="options.live_id" />

	</view>
</template>

<script>
	import Preview from '@/components/preview.vue';

	import {
		api_faceSearchWithUpload,
		api_faceSearchPhoto,
		api_getJumpDownLoadUrl,
		api_batchPhotoBuy,
		api_getSetting,
		api_cartList,
		api_deleteCart,
		api_payCart
	} from '@/api/photo';
	import wContainer from '@/uni_modules/simple-waterfall/components/simple-waterfall/w-container.vue'
	import wItem from '@/uni_modules/simple-waterfall/components/simple-waterfall/w-item.vue'
	export default {
		components: {
			Preview,
			wContainer,
			wItem
		},
		data() {
			return {
				columnNumber: 2,
				columnSpacing: 5,
				// isDetass:true,
				options: {},
				isDetas: false,
				index: 0,
				live_id: '',
				loadStatus: 'loadmore',
				flowList: [

				],
				list: [],
				infrom: {},
				isCartEdit: true,
				selectedImages: [],
				selectedImage: [],
				imageURL: '',
				// 购物车
				cartList: [],
				cartInfrom: {
					isCart: false,
					total_price: null,
					isCartEdit: true,
					checked: false
				},
				cartSelectedImages: [], //购物车选中



			}
		},
		onLoad(options) {
			this.options = options;
			this.live_id = options.live_id;
			console.log(this.options, "this.options")
			let imageURL = uni.getStorageSync('imageURL');
			this.imageURL = imageURL;
			this.id = options.id;
			if (options.base) {
				this.onData2();
			} else {
				this.onData();
			}
			this.onGetSetting();
		},
		created() {
			this.options = this.$route.query;
			let options = this.$route.query;
			this.live_id = options.live_id;
			console.log(this.options, "this.options")
			let imageURL = uni.getStorageSync('imageURL');
			this.imageURL = imageURL;
			this.id = options.id;
			if (options.base) {
				this.onData2();
			} else {
				this.onData();
			}
			this.onGetSetting();
		},
		methods: {

			strClick() {
				// this.close();
			},
			async getCart() {
				let {
					live_id
				} = this.options;
				// 购物车
				let app = this;
				app.cartInfrom.isCart = true;
				app.cartInfrom.isCartEdit = true;
				let res = await api_cartList({
					live_id: live_id,
					type: 'photo_live'
				});
				if (res.code == 1) {
					app.cartList = res.data.list;
					this.$emit('eventName', app.cartList);
					app.cartInfrom.total_price = res.data.total_price;
				}
			},
			// 购物车
			cartToggleSelectImage(id) {
				
				if (this.cartInfrom.isCartEdit) return;
				if (this.cartSelectedImages.indexOf(id) > -1) {
					this.cartSelectedImages = Array.from(new Set(this.cartSelectedImages.filter(item => item != id)));
				} else {
					this.cartSelectedImages.push(id);
				}
				
				if (this.cartList.length == this.cartSelectedImages.length) {
					this.cartInfrom.checked = true;
				} else {
					this.cartInfrom.checked = false;
				}
			},
			// 购物车全选
			handleClick() {
				if (this.cartList.length <= this.cartSelectedImages.length) {
					this.cartSelectedImages = []
					this.cartInfrom.checked = false;
				} else {
					this.cartList.map((item, index) => {
						console.log(index)
						this.cartSelectedImages.push(item.id)
					})
					this.cartInfrom.checked = true;
				}
				// if (this.cartList.length <= this.cartSelectedImages.length) {
				// 	this.cartSelectedImages = []
				// } else {
				// 	this.cartList.map((item, index) => {
				// 		console.log(index)
				// 		this.cartSelectedImages.push(item.id)
				// 	})
				// }
			},
			// 购物车返回
			backRet() {
				this.cartSelectedImages = [];
				this.cartInfrom.isCartEdit = true;
			},
			// 购物车删除
			deleteCart() {
				let {
					live_id
				} = this.options;
				let ids = this.cartSelectedImages.join(',');
				if (this.cartSelectedImages.length == 0) {
					return uni.showToast({
						title: '请选择要删除的数据',
						icon: 'none',
					})
				}
				api_deleteCart({
					live_id: live_id,
					ids: ids
				}).then(res => {
					if (res.code == 1) {
						this.cartList = this.cartList.filter(item => !this.cartSelectedImages.includes(item.id));
						this.flowList.map(item => {
							item.is_cart = this.cartSelectedImages.includes(item.id)
						})
						uni.showToast({
							icon: 'none',
							title: '删除成功'
						});
						// this.$toast('删除成功')
					} else {
						uni.showToast({
							title: '删除失败',
							icon: 'none',
						})
					}
				})
			},
			// 付费下载
			paidDownload() {
				let app = this;
				let {
					live_id
				} = app.options;
				let ids = this.cartList.map(data => data.data_id).join(',');

				api_payCart({
					live_id: live_id
				}).then(result => {
					WeixinJSBridge.invoke(
						'getBrandWCPayRequest', {
							"appId": result.data.appId, //公众号ID，由商户传入     
							"timeStamp": result.data.timeStamp, //时间戳，自1970年以来的秒数     
							"nonceStr": result.data.nonceStr, //随机串     
							"package": result.data.package,
							"signType": result.data.signType, //微信签名方式：     
							"paySign": result.data.paySign //微信签名 
						}, res => {
							if (res.err_msg == "get_brand_wcpay_request:ok") {
								// res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
								uni.showToast({
									title: '支付成功',
									icon: 'none',
								})
								// 支付成功后 手动调用删除购物车
								api_deleteCart({
									live_id: live_id,
									ids: 'all'
								});
								if (this.cartList.length) {
									// 支付成功后 改状态; 
									const photoMap = {};
									this.flowList.forEach(item => {
										photoMap[item.id] = item;
									});

									// 遍历 cartList，查找匹配项并设置 is_buy 为 true
									this.cartList.forEach(item => {
										if (photoMap[item.data_id]) {
											photoMap[item.data_id].is_buy = true;
										}
									});
								};

								api_getJumpDownLoadUrl({
									live_id: live_id,
									ids: ids,
									action: 'pay',
								}).then(resu => {
									this.flowList.map(item => {
										if (app.seleList.indexOf(item.id) > -1) {
											item.is_buy = true;
										}
									});
									setTimeout(() => {
										let a = document.createElement('a');
										a.href = res.data.result.openlink +
											'&action=pay'; // 设置跳转链接
										a.target = '_self'; // 在新标签页中打开链接
										a.click();
										// 点击后移除a标签
										document.body.removeChild(a);
										app.seleList = [];

									}, 500)

								})



							}
						})
				});
			},
			updateValue(index, newValue) {
				console.log(index, newValue)
				this.flowList[index].is_buy = newValue;
			},
			imageClick(item) {
				this.toggleSelectImage(item.id, item.index, item)
				console.log('图片点击事件', item)
			},
			setCartEdit() {
				this.isCartEdit = false;
				console.log(this.isCartEdit)
			},
			cancellation() {

			},
			onGetSetting() {
				const app = this
				let {
					live_id
				} = this.options;
				if (this.code) {
					this.isCode = false;
				}
				api_getSetting({
						live_id: live_id
					})
					.then(res => {
						app.infrom = res.data || {};
					})
			},
			homepage() {
				// let token = uni.getStorageSync('token');
				uni.navigateTo({
					url: `/pages/index/index?live_id=${this.live_id}`,
				});
			},

			// 免费下载图片
			freeDownload() {
				if (this.selectedImages.length < 1) return
				let ids = this.selectedImages.join(',')


				api_getJumpDownLoadUrl({
					live_id: this.live_id,
					ids: ids,
					action: 'free'
				}).then(res => {
					console.log(res.data.result.openlink, "222")
					let a = document.createElement('a');
					a.href = res.data.result.openlink + '&action=free'; // 设置跳转链接
					a.target = '_self'; // 在新标签页中打开链接
					a.click();
					// 点击后移除a标签
					document.body.removeChild(a);
				})


			},
			// 下载付费批量
			paidDownloads() {
				if (this.selectedImages.length < 1) return
				// let ids = this.selectedImages.join(',')
				let app = this;
				let {
					live_id
				} = this.options;
				let getSeleList = [];
				this.flowList.forEach((item) => {
					if (this.selectedImages.indexOf(item.id) > -1 && !item.is_buy) {
						getSeleList.push(item.id)
					}
				});
				let ids = getSeleList.join(',');
				if (!ids) return;
				if (this.selectedImages.length == this.selectedImage.length) {
					api_getJumpDownLoadUrl({
						live_id: live_id,
						ids: ids,
						action: 'pay'
					}).then(res => {
						if (res.code == -1) {
							return uni.showToast({
								title: res.code,
								icon: 'none',
							})
						};
						let a = document.createElement('a');
						a.href = res.data.result.openlink; // 设置跳转链接
						a.target = '_self'; // 在新标签页中打开链接
						a.click();
						// 点击后移除a标签
						document.body.removeChild(a);
					})

					return
				}



				api_batchPhotoBuy({
					live_id: live_id,
					ids: ids
				}).then(result => {
					console.log(result, "result")
					if (result.code == 1) {
						this.paymentJump(result.data.pay_url);
					} else {
						uni.showToast({
							title: result.msg,
							icon: 'none',
						})
					}


				})
			},
			paymentJump(url) {

				let a = document.createElement('a');
				a.href = url // 设置跳转链接
				a.target = '_self'; // 在新标签页中打开链接
				a.click();
				// 点击后移除a标签
				document.body.removeChild(a);

			},
			addRandomData() {
				// await this.onData();
				for (let i = 0; i < this.list.length; i++) {
					let index = this.$u.random(0, this.list.length - 1);
					// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
					let item = JSON.parse(JSON.stringify(this.list[index]))
					// console.log(item, "item")
					// item.strId=this.$u.guid()
					// item.id = this.$u.guid();
					// this.flowList.push(this.list[index]);
				}
			},
			remove(id) {
				this.$refs.uWaterfall.remove(id);
			},
			clear() {
				this.$refs.uWaterfall.clear();
			},
			onData() {
				let {
					live_id,
					id
				} = this.options;
				api_faceSearchPhoto({
					id: id,
					live_id: live_id
				}).then(res => {
					this.list = res.data.list;
					this.flowList = res.data.list;
					// this.addRandomData()
					console.log(this.list, "liust")
				})
			},
			onData2() {
				let imageURL = uni.getStorageSync('imageURL');
				let {
					live_id
				} = this.options;
				api_faceSearchWithUpload({
					live_id: live_id,
					content: imageURL
				}).then(result => {

					this.list = result.data.list;
					this.flowList = result.data.list;


				})
			},
			preview(item, index, id) {
				if (this.isCartEdit) {
					console.log(this.flowList)
					let curIndex = this.flowList.findIndex(i => {
						console.log(i.id == id)

						return i.id == id
						// return i.id == item.id
					})
					this.index = curIndex;
					this.isDetas = true;
					this.$emit('eventName', this.flowList, curIndex, true);
				}
				if (this.isCartEdit) return
				if (this.selectedImage.indexOf(id) > -1 || this.selectedImages.indexOf(id) > -1) {
					this.selectedImages = this.selectedImages.filter(item1 => item1 != item.id);
					this.selectedImage = this.selectedImage.filter(item1 => item1 != item.id);

				} else {

					this.selectedImages.push(id);

					console.log(item, "item")
					if (item.is_buy) {
						this.selectedImage.push(item.id)
					}

				}
			},
			// toggleSelectImage(id, index, item) {
			// 	if (this.isCartEdit) {
			// 		console.log(this.flowList)
			// 		let curIndex = this.flowList.findIndex(i => {
			// 			console.log(i.id == id)

			// 			return i.id == id
			// 			// return i.id == item.id
			// 		})
			// 		this.index = curIndex;
			// 		this.isDetas = true;
			// 		this.$emit('eventName', this.flowList, curIndex, true);
			// 	}
			// 	if (this.isCartEdit) return
			// 	if (this.selectedImage.indexOf(id) > -1 || this.selectedImages.indexOf(id) > -1) {
			// 		this.selectedImages = this.selectedImages.filter(item1 => item1 != item.id);
			// 		this.selectedImage = this.selectedImage.filter(item1 => item1 != item.id);

			// 	} else {

			// 		this.selectedImages.push(id);

			// 		console.log(item, "item")
			// 		if (item.is_buy) {
			// 			this.selectedImage.push(item.id)
			// 		}

			// 	}
			// },

			filterBase64(codeImages) {
				return codeImages.replace(/[\r\n]/g, " ");
			}

		},

		onReachBottom() {
			this.loadStatus = 'loading';
		},
	}
</script>
<style scoped lang="scss">
	.facial-content {
		position: fixed;
		top: 0;
		left: 0;
		height: 100%;
		z-index: 555;
		width: 100%;
	}

	.h100p {
		position: relative;
		z-index: 555;
	}

	#find-result {
		background: linear-gradient(180deg, #22235b, #0e0f2c);
		min-height: 100%;
		// position: absolute;

		.own-top {
			height: 200rpx;
			// position: fixed;
			width: 100%;
			left: 0;
			top: 0;
			z-index: 22;
			padding-top: 32rpx;
		}

		.before-fl {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 0;
			background-color: rgba(0, 0, 0, .3);
			background-image: url(https://static1.weizan.cn/zhibo/livecontent/topic/images/jcsj-bg.png);
			background-repeat: no-repeat centen center;
			background-size: 100% 100%;
		}

		.contetn-ft {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			position: relative;

			text {
				color: #fff;
			}

			.num {
				color: #0048ff;

			}
		}

		.face-images-wrap.center {
			display: flex;
			flex-direction: row;
			width: 100%;
			height: auto;
			// overflow-y: scroll;
			align-items: center;
		}

		.center {
			justify-content: center;
		}

		.face-images-item.active {
			width: 120rpx;
			height: 120rpx;
			border: 2rpx solid #006cff;
			border-radius: 50%;

			img {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
			}
		}

		.WaterFall {

			min-height: 100vh;
			margin-top: 200rpx;
			padding-bottom: 140rpx;
			padding-left: 20rpx;
			padding-right: 20rpx;

			.list_images {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				padding-bottom: 100px;
				padding-top: 17px;

				.u-list-item {
					width: 320rpx;
					height: 200rpx;
					// height: 500rpx;

					img {
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
				}
			}
		}

		.face-fixed-bar {
			z-index: 22;
			background: #0f102f;
			padding: 0 20rpx 0 26rpx;
			box-sizing: border-box;
			position: fixed;
			left: 0;
			bottom: 0;
			border-top: 1px solid rgba(245, 246, 247, .1);
			display: flex;
			width: 100%;
			height: 140rpx;
			align-items: center;
			justify-content: space-between;

			.flex-v {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				margin-right: 50rpx;
				color: #FFFFFF;

				img {
					width: 50rpx;
					height: 50rpx;
					margin-bottom: 0.05rem;
				}
			}

			.face-share-btn {
				background: linear-gradient(270deg, #ffa800, #ffe156);
			}

			.face-jigsaw-btn {
				margin-left: 20rpx;
				background: linear-gradient(270deg, #006cff, #00a5ff);
			}

			.face-share-btn,
			.face-jigsaw-btn {
				display: flex;
				justify-content: center;
				color: #fff;
				font-size: 26rpx;
				align-items: center;
				flex: 1;
				height: 80rpx;
				border-radius: 60rpx;
			}

		}

	}

	.demo-warter {
		// border-radius: 8px;
		margin: 5px;
		background-color: #ffffff;
		padding: 2px;
		position: relative;
	}

	.u-close {
		position: absolute;
		top: 32rpx;
		right: 32rpx;
	}

	.demo-image {
		width: 100%;
		border-radius: 4px;
	}

	.demo-title {
		font-size: 30rpx;
		margin-top: 5px;
		// color: $u-main-color;
	}

	.demo-tag {
		display: flex;
		margin-top: 5px;
	}

	.demo-tag-owner {
		// background-color: $u-type-error;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 4rpx 14rpx;
		border-radius: 50rpx;
		font-size: 20rpx;
		line-height: 1;
	}

	.demo-tag-text {
		// border: 1px solid $u-type-primary;
		// color: $u-type-primary;
		margin-left: 10px;
		border-radius: 50rpx;
		line-height: 1;
		padding: 4rpx 14rpx;
		display: flex;
		align-items: center;
		border-radius: 50rpx;
		font-size: 20rpx;
	}

	.demo-price {
		font-size: 30rpx;
		// color: $u-type-error;
		margin-top: 5px;
	}

	.demo-shop {
		font-size: 22rpx;
		// color: $u-tips-color;
		margin-top: 5px;
	}

	/deep/ {
		.u-column {
			position: relative;
		}
	}


	.check_btn {
		position: relative;
	}

	.check_btn {
		position: relative;
	}





	.check_footer {
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		justify-content: center;
		flex-direction: column;
		z-index: 999;
		width: 100%;

		.down-tips {
			line-height: 60rpx;
			height: 60rpx;
			background: #fff8ec;
			font-size: 24rpx;
			font-weight: 400;
			color: #ffa800;
			padding: 0 16rpx;
			text-overflow: clip;
			overflow: hidden;
			white-space: nowrap;
			width: 100%;
			box-sizing: border-box;
		}

		.d-flex {
			display: flex;
		}

		.row {
			width: 100%;
			height: 200rpx;
			display: flex;
			align-items: center;
			padding: 0 32rpx;
			background: #fff;
			box-sizing: border-box;

			.cancel {
				display: flex;
				flex-direction: column;
				cursor: pointer;
				font-size: 26rpx;
				flex-shrink: 0;
				align-items: center;
			}

			.btn-wrap-outer {
				flex: 1;
			}

			.free-download,
			.pay-download {
				display: flex;
				flex: 1;
				position: relative;
				margin-left: 20rpx;
			}

			.pay-download {
				.btn-down {
					background: linear-gradient(270deg, #ff8d00, #ffc000);
				}

			}

			.btn-down {
				height: 100rpx;
				border-radius: 80rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				flex: 1;
				font-size: 24rpx;
				color: #fff;
				background: linear-gradient(270deg, #006cff, #00a5ff);
			}
		}



	}


	// 购物车
	.cart_box {
		padding: 10rpx 30rpx;
		// min-height: 500rpx;

		.header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 26rpx;

			h1 {
				font-size: 32rpx;
				font-weight: 600;
				color: #202124;
			}

			p {
				font-size: 26rpx;
				color: #006cff;
			}
		}

		.empty_tip {
			height: 380rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			font-size: 20rpx;
			color: #919499;


		}

		.empty_tip::before {
			content: " ";
			width: 140rpx;
			height: 140rpx;
			background: url(../../static/pic-live-empty.png);
			background-size: 100% 100%;
			margin-bottom: 0.1rem;
		}

		.footer {
			padding: 40rpx;
			border-top: 1px solid #f5f6f7;
			font-size: 20rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			line-height: 1.6;
			font-size: 26rpx;

			.control {
				width: 240rpx;

				margin-right: 10rpx;
				color: #006cff;
				background-color: rgba(0, 108, 255, .1);
				border-radius: 50rpx;
			}

			.control.del {
				color: #f44;
				background-color: rgba(255, 68, 68, .1);
			}

			.detail {
				font-size: 20rpx;

			}

			.price {
				flex: 1;
				color: #000;
			}

			var {
				color: #f44;
			}

			.pay {
				// font-size: 12rpx;
				// width: 220rpx;
				font-size: 16px;
				padding: 2px 30px;
				// height: 90rpx;
				border-radius: 62rpx;
				color: #fff;
				background: linear-gradient(270deg, #006cff, #00a5ff);
				// flex-shrink: 0;
			}
		}
	}

	;

	.list_wrappers {
		padding: 0 30rpx;

		.list_img {
			// display: flex;
		}

		.image-container {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			grid-gap: 20rpx;


			img {
				// margin-right: 10rpx;
				// margin-top: 10rpx;
				width: 100%;
				height: 200rpx;
				object-fit: cover;
				// height: 100%;

			}

			.active {
				// width: 45%;
				position: relative;
			}

			.active::after {

				position: absolute;
				top: 0;
				right: 0;
				content: " ";
				width: 70rpx;
				height: 70rpx;
				border-radius: 0 10rpx;
				background: url(../../static/xiaz.png) no-repeat #000;
				background-position: center;
				background-size: 100% 100%;

			}
		}

		.image-container2 {
			display: grid;
			grid-template-columns: repeat(3, 2fr);
			grid-gap: 20rpx;
			// height: 2.05rem;

			img {
				// margin-right: 10rpx;
				// margin-top: 10rpx;
				width: 100%;
				height: 100%;

			}

			.active {
				// width: 45%;
				position: relative;
			}

			.active::after {

				position: absolute;
				top: 0;
				right: 0;
				content: " ";
				width: 70rpx;
				height: 70rpx;
				border-radius: 0 10rpx;
				background: url(../../static/xiaz.png) no-repeat #000;
				background-position: center;
				background-size: 100% 100%;

			}
		}

	}

	.box {
		background-color: #fff;
		box-shadow: 3rpx 5rpx 57rpx 0px rgba(155, 131, 255, 0.2);
		// border-radius: 10rpx;
		overflow: hidden;
	}

	.image {
		width: 100%;
		height: auto;
		box-sizing: border-box;
		margin: 0;
		padding: 0;
		vertical-align: bottom;
	}

	.Waterfall_flow {
		padding: 4rpx;
		position: relative;
		min-height: 100vh;
		// margin-top: 200rpx;
		padding-bottom: 140rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
	}

	.purchased::after {
		position: absolute;
		top: 2rpx;
		right: 2rpx;
		content: "已购";
		padding: 4rpx;
		font-size: 32rpx;
		border-radius: 5rpx;
		background: #FEA701;
		color: #fff;
		// background: url(../../static/weix.png)no-repeat;
		background-position: center;
		background-size: 100% 100%;
	}

	.xz.check_btn::after {
		position: absolute;
		top: 10rpx;
		left: 0;
		content: " ";
		width: 50rpx;
		height: 50rpx;
		border-radius: 0 10rpx;
		background: url(../../static/yixuan.png)no-repeat;
		background-position: center;
		background-size: 100% 100%;
	}

	.check_btn::after {
		position: absolute;
		top: 10rpx;
		left: 0;
		content: " ";
		width: 50rpx;
		height: 50rpx;
		border-radius: 0 10rpx;
		background: url(../../static/weix.png)no-repeat;
		background-position: center;
		background-size: 100% 100%;

	}

	.flex-s {
		position: relative;
	}
</style>